<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="../static/assets/css/index.css">
    <!-- <link rel="stylesheet" href="./css/demo.css"> -->
    <link rel="stylesheet" href="../static/assets/font/iconfont.css">
    <!-- <script src="./js/index.js"></script> -->
    <link rel="stylesheet" href="../static/assets/css/110.css">
    <script src="../static/assets/js/echarts.min.js"></script>

</head>
<body>
    <!-- 侧边栏 -->
    <aside class="main-aside">
        <!-- 3D动态盒 -->
        <div class="header3D">
            <div class="cube" id="box">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
              </div>
        </div>
        <!-- 侧边栏选项 -->
        <div class="asideOption">
            <ul>
                <li>
                    <a href="index.html">
                        <span>首页</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
                <li>
                    <a href="bar.html">
                        <span>柱状图</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
                <li>
                    <a href="pie.html">
                        <span>饼图</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
                <li>
                    <a href="line.html">
                        <span>折线图</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>

                <li>
                    <a href="bubble.html">
                        <span>气泡图</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
                <li>
                    <a href="polar-bar.html">
                        <span>极坐标下的堆积柱状图</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>

            </ul>



        </div>
        <!-- 旋转图 -->
        <div class="loader">
            <div class="left-box">
                <div class="dots-top">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
                <div class="dots-bottom">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
            </div>
            <div class="right-box">
                <div class="dots-top">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
                <div class="dots-bottom">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
            </div>
        </div>
    </aside>
    <!-- 头部导航栏 -->
     <div class="headernav">
         <h1>首页: 数据表展示</h1>
            <select name="area" id="">
                <option value="西藏" class="one">西藏</option>
                <option value="张家界" class="two">张家界</option>
                <option value="大理" class="three">大理</option>
                <option value="长沙" class="four">长沙</option>
            </select>
        <!-- 时间 -->
        <button id="time" type="text"></button>
    </div>
    <!-- 内容区 -->
    <div class="main-content">
        <!-- 内容展示 -->
        <div class="show-content">
             <table class="table table-striped" style="border-collapse: collapse; width: 100%" border="1" >
                <thead>
                    <tr style="height: 60px">
                        <th>景区</th>
                        <th>价格</th>
                        <th>星级</th>
                        <th>地区</th>
                        <th>热度</th>
                        <th>简介</th>
                        <th>销量</th>
                        <th>详情链接</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>

    </div>




    <script src="../static/assets/js/index.js"></script>
    <!-- 数据展示切换 -->
    <script>
        // 景点数据展示切换
        var select = document.querySelector("select");
        var tbody = document.querySelector("tbody");

        // 先调用一次 渲染默认数据展示
        xiZang();

        // 首页默认选中西藏 展示西藏
        function xiZang(){
            // 运用模板字符串 向tbody中添加jinja2语句
            tbody.innerHTML = `{% for data in xizang %}
                         <tr style="width: 100%">
                            <td>{{ data[0] }}</td>
                            <td>{{ data[1] }}</td>
                            <td>{{ data[2] }}</td>
                            <td>{{ data[3] }}</td>
                            <td>{{ data[4] }}</td>
                            <td>{{ data[5] }}</td>
                            <td>{{ data[6] }}</td>
                            <td>
                                <a href="{{ data[7] }}">
                                    {{ data[0] }}
                                </a>
                            </td>
                        </tr>
                {% endfor %}`;
        }
        // 大理
        function daLi(){
            // 运用模板字符串 向tbody中添加jinja2语句
            tbody.innerHTML = `{% for data in daLi %}
                         <tr style="width: 100%">
                            <td>{{ data[0] }}</td>
                            <td>{{ data[1] }}</td>
                            <td>{{ data[2] }}</td>
                            <td>{{ data[3] }}</td>
                            <td>{{ data[4] }}</td>
                            <td>{{ data[5] }}</td>
                            <td>{{ data[6] }}</td>
                            <td>
                                <a href="{{ data[7] }}">
                                    {{ data[0] }}
                                </a>
                            </td>
                        </tr>
                {% endfor %}`;
        }
        // 张家界
        function zJJ(){
            // 运用模板字符串 向tbody中添加jinja2语句
            tbody.innerHTML = `{% for data in zjj %}
                         <tr style="width: 100%">
                            <td>{{ data[0] }}</td>
                            <td>{{ data[1] }}</td>
                            <td>{{ data[2] }}</td>
                            <td>{{ data[3] }}</td>
                            <td>{{ data[4] }}</td>
                            <td>{{ data[5] }}</td>
                            <td>{{ data[6] }}</td>
                            <td>
                                <a href="{{ data[7] }}">
                                    {{ data[0] }}
                                </a>
                            </td>
                        </tr>
                {% endfor %}`;
        }
        // 长沙
        function cS(){
            // 运用模板字符串 向tbody中添加jinja2语句
            tbody.innerHTML = `{% for data in cs %}
                         <tr style="width: 100%">
                            <td>{{ data[0] }}</td>
                            <td>{{ data[1] }}</td>
                            <td>{{ data[2] }}</td>
                            <td>{{ data[3] }}</td>
                            <td>{{ data[4] }}</td>
                            <td>{{ data[5] }}</td>
                            <td>{{ data[6] }}</td>
                            <td>
                                <a href="{{ data[7] }}">
                                    {{ data[0] }}
                                </a>
                            </td>
                        </tr>
                {% endfor %}`;
        }

        // 选择景区地 展示对应景区数据
        select.addEventListener("change", function (evt){
            var e = evt || window.event;
            // 每次切换是回到顶部
            document.documentElement.scrollTop = 0;
             var index = select.selectedIndex;
             if(index == 0){
                 xiZang();
             }else if(index == 1){
                 zJJ();
            }else if(index == 2){
                 daLi();
             }else{
                 cS();
            }
        })
    </script>

</body>
</html>